<template>
  <div class="page_wrapper goods-group-container">
    <a-row>
      <div class="group-item flex flex-between">
        <a-button @click="collapseAll">{{
          !!isCollapseAll ? "展开全部" : "折叠全部"
        }}</a-button>
        <a-button @click="openGroupModel($event, 'add')">新增一级分组</a-button>
      </div>
    </a-row>

    <a-collapse class="group-item" v-model="activeKey">
      <a-collapse-panel :key="systemGroupInfo.id">
        <a-row slot="header">
          <a-col :span="15"
            >系统分组
            <a-popover placement="right">
              <template slot="content" class="popover_content">
                <p>
                  新品上架是系统根据上架时间自动收录的商品，显示最新上架的20个商品；
                </p>

                <p>
                  热销排行是系统根据销量自动收录的商品，显示销量最高的前20个商品；
                </p>

                <p>未分组是系统收录无分组的所有商品；</p>

                <p>系统分组无法编辑和删除，可以设置是否显示给用户。</p>
              </template>
              <template slot="title">
                <span>说明</span>
              </template>
              <i
                aria-label="图标: question-circle"
                class="anticon anticon-question-circle"
                style="
                  margin-left: 10px;
                  color: rgb(178, 174, 188);
                  cursor: pointer;
                "
                ><svg
                  viewBox="64 64 896 896"
                  focusable="false"
                  class=""
                  data-icon="question-circle"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 0 0-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z"
                  ></path></svg
              ></i>
            </a-popover>
          </a-col>
          <a-col :span="9">
            分组显示
            <a-switch
              class="m-l-10"
              :data-id="systemGroupInfo.id"
              :data-status="systemGroupInfo.groupStatus"
              :checked="systemGroupInfo.groupStatus == 1"
              @click="changeGroupStatus"
          /></a-col>
        </a-row>
        <a-row class="g-i-con">
          <a-col :span="15">
            <a>*新品上架</a>（系统自动读取最新上架的20个商品）
          </a-col>
          <a-col :span="9">
            {{ systemGroupInfo.groupStatus == 1 ? "" : "不" }}显示
          </a-col>
        </a-row>
        <a-row class="g-i-con">
          <a-col :span="15">
            <a>*热销排行</a>（系统自动读取销量最高的20个商品）
          </a-col>
          <a-col :span="9">
            {{ systemGroupInfo.groupStatus == 1 ? "" : "不" }}显示
          </a-col>
        </a-row>
        <a-row class="g-i-con">
          <a-col :span="15">
            <a>*列表中隐藏</a>
          </a-col>
          <a-col :span="9"> 该分组默认不会展示在买家页面 </a-col>
        </a-row>
        <a-row class="g-i-con">
          <a-col :span="15">
            <a>*未分组</a>
          </a-col>
          <a-col :span="9"> 该分组默认不会展示在买家页面 </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>

    <div>
      <a-collapse
        class="group-item"
        v-model="activeKey"
        v-for="item in goodsGroupList"
        :key="item.id"
      >
        <a-collapse-panel :key="item.id.toString()">
          <a-row slot="header">
            <a-col :span="15">{{ item.groupName }} </a-col>
            <a-col :span="4">
              显示分组
              <a-switch
                class="m-l-10"
                :data-status="item.groupStatus"
                :data-id="item.id"
                :checked="item.groupStatus == 1"
                @click="changeGroupStatus"
            /></a-col>
            <a-col :span="5" style="text-align: right">
              <a
                class="m-r-10"
                @click="openSecondGroupModel($event, item, 'add')"
                >新增二级分组</a
              >
              <a class="m-r-10" @click="openGroupModel($event, item, 'edit')"
                >编辑</a
              ><a class="m-r-10" @click="deleteSecondGroup($event, item)"
                >删除</a
              >
            </a-col>
          </a-row>
          <template v-if="item.children && item.children.length > 0">
            <a-row
              class="g-i-con"
              v-for="child in item.children"
              :key="child.id"
            >
              <a-col :span="8">
                <div class="flex flex-v-center">
                  <div
                    class="group-img"
                    :style="{
                      backgroundImage: `url(${child.groupImg})`,
                    }"
                  ></div>
                  {{ child.groupName }}
                </div>
              </a-col>
              <a-col :span="7">
                <span
                  >商品数量：<a draggable="false">{{ child.goodsNum }}</a></span
                >
              </a-col>
              <a-col :span="4">
                {{ child.groupStatus == 1 ? "显示" : "隐藏" }}分组
                <a-switch
                  class="m-l-10"
                  :data-status="child.groupStatus"
                  :data-id="child.id"
                  :checked="child.groupStatus == 1"
                  @click="changeGroupStatus"
              /></a-col>
              <a-col :span="5" style="text-align: right">
                <a
                  class="m-r-10"
                  @click="openSecondGroupModel($event, child, 'edit', item)"
                  >编辑</a
                ><a class="m-r-10" @click="deleteSecondGroup($event, child)"
                  >删除</a
                >
              </a-col>
            </a-row>
          </template>
          <a-row v-else>
            <p class="no_data p-20">暂无数据~</p>
          </a-row>
        </a-collapse-panel>
      </a-collapse>
    </div>

    <!-- model层 -->
    <group-modal
      v-model="showModal"
      :records="currentRecord"
      :childModal="sencondModal"
      :title="title"
      @handleSubmit="getProductGroup"
    ></group-modal>
  </div>
</template>
<script>
import { mapState } from "vuex";
import GroupModal from "./components/GroupModal";
export default {
  name: "commodityGroup",

  data() {
    return {
      activeKey: [],
      showModal: false, // 是否展示Model 层
      currentRecord: {},
      title: "新增分组",
      sencondModal: false, // 二级分组添加
      isCollapseAll: false,
      systemGroupInfo: {}, // 系统分组内容
      goodsGroupList: [], // 自定义分组
      currentLevel: 1,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo || {},
    }),
  },

  components: {
    GroupModal,
  },

  created() {
    this.$nextTick(() => {
      this.getProductGroup();
    });
  },

  methods: {
    changeGroupStatus(checked, e) {
      e.stopPropagation();
      console.log(e.target.dataset);
      let { id, status: groupStatus } = e.target.dataset;
      this.updateGoodsGroup(id, groupStatus);
    },

    // 禁用或启用分组
    async updateGoodsGroup(...obj) {
      let res = await this.$post(`/goods/group/enable`, {
        groupStatus: obj[1] == 1 ? 0 : 1,
        ids: [obj[0]],
      });
      if (res && res.returnCode == "1000") {
        this.getProductGroup();
      }
    },

    collapseAll() {
      this.isCollapseAll = !this.isCollapseAll;
      if (!!this.isCollapseAll) {
        this.activeKey = [];
      } else {
        let arr = [];
        this.goodsGroupList.forEach((item) => {
          arr.push(item.id);
        });
        arr.push(this.systemGroupInfo.id);
        this.activeKey = arr;
      }
    },
    handleSubmit() {},
    openGroupModel(e, record, type) {
      e.stopPropagation();
      this.currentRecord = {};
      if (type == "edit") {
        this.currentRecord = { ...record };
      }
      this.$set(this.currentRecord, "groupLevel", 1);
      this.sencondModal = false;
      this.showModal = true;
    },
    openSecondGroupModel(e, record, type, parent = {}) {
      e.stopPropagation();
      this.currentRecord = {};
      if (type == "add") {
        this.$set(this.currentRecord, "parentGroupName", record.groupName);
        this.$set(this.currentRecord, "parentId", record.id);
      } else {
        this.currentRecord = { ...record, parentGroupName: parent.groupName };
      }
      this.$set(this.currentRecord, "groupLevel", 2);
      this.showModal = true;
      this.sencondModal = true;
    },
    // 删除
    deleteSecondGroup(e, record) {
      e.stopPropagation();
      this.$confirm({
        title: "删除提示",
        content: "删除操作不可恢复，请确认是否删除？",
        okText: "确认删除",
        cancelText: "取消",
        onOk: () => {
          this.$post("/goods/group/delete", [record.id]).then((res) => {
            if (res && res.returnCode == 1000) {
              this.$message.success("删除成功");
              this.getProductGroup();
            }
          });
        },
      });
    },
    async getProductGroup() {
      let res = await this.$get(`/goods/group/listTree`, {
        shopId: this.userInfo.shopId,
      });
      if (res && res.returnCode == "1000") {
        this.systemGroupInfo =
          !!res.dataInfo.systemGroupList && res.dataInfo.systemGroupList[0];
        this.goodsGroupList =
          !!res.dataInfo.goodsGroupList && res.dataInfo.goodsGroupList;
        let arr = [];
        this.goodsGroupList.forEach((item) => {
          arr.push(item.id);
        });
        arr.push(this.systemGroupInfo.id);
        this.activeKey = arr;
      }
    },
  },
};
</script>


<style lang="less" scoped>
.group-item {
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: #fff;
  box-sizing: border-box;
}

.popover_content {
  p {
    margin-top: 10px;
    font-size: 12px;
  }
}

.g-i-con {
  margin-left: 24px;
  height: 50px;
  line-height: 36px;
  padding: 7px 0;
  border-bottom: 1px solid #ebebeb;
  &:last-child {
    border: none;
  }
}
.goods-group-container {
  ::v-deep .ant-collapse-content-box {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .group-img {
    display: inline-block;
    margin-right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 2px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.no_data {
  text-align: center;
}
</style>
